// APP部署的服务器地址 - 全局变量
let host = "http://localhost:8080/" ;

// 定义过滤器 - 实现指定货币符号和保留位数
Vue.filter('moneyFilter', function (money,type,n) {
    // 转换为数值类型
    money = money * 1
    return type + money.toFixed(n) ;
})

// 自定义全局指令 - 实现设置字体颜色
Vue.directive('color',{
    inserted(el,binding) {

        // if(binding.arg=='color') {
        //     el.style.color = binding.value ;
        // } else {
        //     el.style.background = binding.value ;
        // }

        if(!(binding.arg=='color' || binding.arg=='background')) {
            return ;
        }
        // 对象的访问有两种方法，分别为：点操作符访问和中括号访问
        el.style[binding.arg] = binding.value ;
    }
}) ;


let vm = new Vue({
    el:'#app',
    // 定义页面需要的数据
    data:{
        // 定义一个数组，用于接收查询的商品列表
        productList:[],
        // 定义一个标识变量，用于判断是添加操作还是修改操作
        isUpdate : false,
        // 定义一个对象，用于双向绑定表单数据
        product:{},

        deleteIndex:-1
    },
    // 定义方法，用于响应页面事件
    methods:{
        // 删除商品
        del(pid) {

            if(confirm('您真的要删除此数据？')) {
                
                // 1.向服务器发起异步请求，实现数据的删除
                $.ajax({
                    url: host +'/product-demo/api/DeleteServlet' ,
                    method:'get',
                    data:{ pid : pid },
                    success:function( res ) {
                        if(res.code==200) {
                            // 2.删除页面中的数据
                            // 利用数组的API方法 filter 过滤掉删除的商品
                            vm.productList = vm.productList.filter(function(p,index){
                                return p.id != pid ;
                            }) ;

                            alert('删除成功')
                            return ;
                        }
                        alert(res.msg)
                    }
                })

                
            }


            

            
        },
        // 展示修改商品
        show( p, index ) {
             // 创建一个新的对象，避免数据修改实时性
             let updateProduct = Object.assign({}, p)

             // 设置文本框只读
             vm.$refs.pid.readOnly = true ;

             // 获取删除数据的下过索引
             vm.deleteIndex = index ;

            // 双向绑定，回显数据到表单中
            vm.product = updateProduct ;
            // 修改表单标题为 - 修改商品
            vm.isUpdate = true ;
        },
        // 清空表单 - 还原原始状态
        cls() {
            // 修改表单标题为 - 添加商品
            vm.isUpdate = false ;

            // 清空表单
            vm.product = {};

            // 设置可写
            this.$refs.pid.readOnly = false ;

            // 获取焦点
            this.$refs.pid.focus() ;

        },
        // 提交表单 - 添加商品 / 修改商品
        tj() {
            // 1.修改
            if(vm.isUpdate) {
                // 1.1）获取表单数据 - 通过表单双向绑定获取(略)
                // 1.2）发起异步请求
                $.ajax({
                    url: host + 'product-demo/api/UpdateServlet',
                    data: vm.product,
                    method:'post',
                    success( res ) {
                        if(res.code ==200) {
                            alert('修改成功')
                            // 1.3）更新页面..
                            vm.productList.splice(vm.deleteIndex,1,vm.product)
                            return 
                        }

                        alert(res.msg)
                    }
                }) ;
                
                return ;
            }

            // 2.添加
            // 2.1）获取表单数据 - 通过表单双向绑定获取(略)
            // 2.2）发起异步请求
            $.ajax({
                url: host + '/product-demo/api/AddServlet',
                data: vm.product ,
                method:'post',
                success( res ){
                    if(res.code == 200) {
                        alert(res.msg)

                        // 2.3）更新页面数据
                        vm.productList.push(vm.product) ;

                        // 清空表单
                        vm.product = {}

                        // 文本框获取焦点
                        vm.$refs.pid.focus() ;
                    }
                }
            }); 


            
        }
    },
    // 生命周期钩子函数 - 页面加载时查询所有的商品信息，并回显在页面中
    mounted() {
    
        // 查询商品的服务器程序地址
        let url = host + '/product-demo/api/QueryAllServlet' ;

        // 获取当前 Vue 实例对象
        let that = this ;
        // No 'Access-Control-Allow-Origin' - 浏览器默认情况下，不允许跨域访问 - 需要在服务器编写一个过滤器，设置允许跨域访问
        $.get(url,function( res ){
            that.productList = res.data ;
        }) ;
    }
}) ;